<template>
	<div class="studentmanager">

		<div class="searchbox">
				<el-input class="el_input" v-model="name" @keyup.native.enter="searchcenter()" placeholder="请输入姓名"></el-input>
				<el-input class="el_input" v-model="curid" @keyup.native.enter="searchcenter()" placeholder="请输入学号"></el-input>
				<el-input class="el_input" v-model="classname" @keyup.native.enter="searchcenter()" placeholder="请输入班级"></el-input>
				<el-button class="search" type="primary" icon="el-icon-search" @click="searchcenter()" style="background-color:#106ab1 ;">搜索</el-button>
				<el-button style="float: right;" class="add" type="primary" icon="el-icon-circle-plus-outline" @click="addstudent">添加</el-button>
		</div>
		<div class="tablebox">
			<template>
				<el-table :data="tableinfo" class="el_table">
					<el-table-column prop="stuName" label="姓名">
					</el-table-column>
					<el-table-column prop="stuSex" label="性别">
					</el-table-column>
					<el-table-column prop="stuPhone" label="联系方式">
					</el-table-column>
					<el-table-column prop="stuAge" label="年龄">
					</el-table-column>
					<el-table-column prop="clazzName" label="班级">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<span class="edit" @click="changestudent(scope.row)">修改</span>
							<span class="dele" @click="dele(scope.row)">删除</span>
						</template>

					</el-table-column>
					<el-table-column>
						<template slot-scope="scope">
							<img src="../image/切图-右.png" @click="morestudentinfo(scope.row)"
								style="float: left;margin-left: 10px;cursor: pointer;" />
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<el-pagination class="page" :current-page="pageindex" :page-size="pagesize" layout="prev, pager, next" @current-change="changepage"
			:total="totoSize">
		</el-pagination>
		<el-dialog title="" :visible.sync="centerDialogVisible" width="30%" center>
			<p style="text-align: center;"><b>确认删除</b></p>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="determinedele">确 定</el-button>
				<el-button @click="centerDialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import router from '@/router'
	export default {
		data() {
			return {
				baseUrl: require("../js/baseUrl.js").baseUrl,
				name: "",
				curid: "",
				deleid: "",
				classname: "",
				centerDialogVisible: false,
				tableinfo: [],
				totoSize: 0,
				pageindex: 1,
				pagesize: 5,
				classid: "",
				
				searchname:"",
				searchcurid:"",
				searchclassname:""
			}
		},
		methods: {
			changepage(page) {
				
				this.pageindex = page
				console.log(this.pageindex)
				this.searchname=this.name
				this.searchcurid=this.curid
				this.searchclassname=this.classname
				this.searchAll()
			},
			searchcenter() {
				this.pageIndex = 1
				this.searchname=this.name
				this.searchcurid=this.curid
				this.searchclassname=this.classname
				this.search()
			},
			changestudent(info) {
				//修改信息
				sessionStorage.setItem("info", JSON.stringify(info))
				this.$router.push("/studentmanager/addstudent1?index=1")
			},
			addstudent() {
				this.$router.push("/studentmanager/addstudent1")
			},
			morestudentinfo(info) {
				//更多
				this.$router.push("/studentmanager/morestudent?stuId=" + info.stuId)
			},
			determinedele() {
				//删除数据
				// SchoolSys/stu/delete
				this.centerDialogVisible = !this.centerDialogVisible
				this.$http.post(this.baseUrl + "SchoolSys/stu/delete", {
					stuId: this.deleid
				}).then(res => {
					// console.log(res)
					if(res.data.code==200){
						this.$message({
							type: "success",
							message: "删除成功"
						})
						// this.pageindex=1
						this.searchAll()
						
					}else{
						this.$message.error("删除失败")
					}
					
				})

			},
			dele(info) {
				this.centerDialogVisible = true
				this.deleid = info.stuId
			},
			searchAll() {
				// 搜索所有学生   SchoolSys/stu/select
				this.$http.post(this.baseUrl + "SchoolSys/stu/select", {
					pageIndex: this.pageindex,
					pageSize: this.pagesize
				}).then(res => {
					if(res.data.code==200){
						// console.log(res.data.data)
						this.totoSize = res.data.data.a
						this.tableinfo = res.data.data.data
						// this.pageindex=1
						// this.pagesize=5
					}
					
				})
				
			},
			//条件查询
			search(){
				if(this.name=="" && this.curid=="" && this.classname==""){
					// console.log("aaa")
					this.searchAll()
				}else{
					// console.log("bbb")
					// SchoolSys/clazz/like
					if(this.searchname==""){
						this.searchname=null
					}
					if(this.searchcurid==""){
						this.searchcurid=null
					}
					if(this.searchclassname==""){
						this.searchclassname=null
					}
					// console.log(this.searchcurid)
					// console.log(this.searchname)
					// console.log(this.searchclassname)
					this.$http.post(this.baseUrl + "SchoolSys/stu/like",{
						stuName: this.searchname,
						stuNum:this.searchcurid,
						clazzName:this.searchclassname,
						pageIndex: this.pageindex,
						pageSize: this.pagesize
					}).then(res=>{
						// console.log(res)
						if(res.data.code==200){
							this.tableinfo = res.data.data.data
							this.totoSize = res.data.data.a
							// this.searchAll()
						}else{
							this.$message.error("查找失败")
						}
					})
				}
				
			},

		},
		mounted() {
			this.searchAll()

		}
	}
</script>

<style>
	* {
		padding: 0;
		margin: 0;
	}

	/*上面搜索*/
	.studentmanager .searchbox {
		padding: 40px;
	}

	.studentmanager .el_input {
		width: 200px;
		margin-right: 20px;
	}


	/* 表格 */
	.studentmanager .tablebox {
		margin-left: 40px;
		margin-right: 40px;
	}

	.studentmanager .el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		color: #333;
	}

	.studentmanager .el-table {
		background: transparent;
	}

	.studentmanager .el-table th.el-table__cell>.cell {
		text-align: center;
	}

	.studentmanager .el-table td.el-table__cell div {
		text-align: center;
		font-size: 13px;
	}

	.studentmanager .el-table th.el-table__cell {
		background-color: #f3f8fd;
	}

	.studentmanager .edit {
		margin-right: 10px;
		font-size: 13px;
		color: green;
	}

	.studentmanager .dele {
		font-size: 13px;
		color: red;
	}

	.studentmanager .el-table .el-table__body {
		border-collapse: separate;
		border-spacing: 0 15px;
		border-radius: 20px;
	}

	/* 翻页 */
	.studentmanager .el-pagination {
		text-align: center;
		/* margin-top: 50px; */
	}

	.studentmanager span {
		cursor: pointer;
	}

	.studentmanager .page {
		/* position: absolute; */
		left: 0;
		right: 0;
		bottom: 40px;
	}
</style>